<template>
  <div class= "home-container">
    <!-- 导航栏 -->
    <van-nav-bar fixed class="defind-nav-bar">
           <!-- 自定义插槽 需要加slot -->
      <van-button  slot="title" icon="search" class="serachbtn" type="primary" to="/search">搜索</van-button>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- tab标签页 -->
    <van-tabs animated swipeable class="tabs" v-model="tabActive">
      <van-tab :title="item.name" v-for="item in channelsData"  :key="item.id">
        <article-list :channels="item"/>
      </van-tab>
      <!-- 汉堡导航 -->
      <div slot="nav-right" class="hamburger" @click="popupShow">
        <i class="toutiao icon-tt-gengduo"></i>
      </div>
      <!-- 右侧占位 -->
      <div class="right" slot="nav-right"></div>
    </van-tabs>
    <!-- /tab标签页 -->

    <!-- 弹出层 -->
    <van-popup round closeable close-icon="close" v-model="popup" position="bottom" :style="{ height: '65%' }">
      <channels @sendIndex="updateActive" :channelsEdit="channelsData" :tabActive="tabActive"/>
    </van-popup>
    <!-- /弹出层 -->
  </div>
</template>

<script>
// 引入借口
import { getUserChannels } from '@/api/user.js'
// 引入文字列表组件
import articleList from '@/views/Home/components/ArticleList.vue'
import channels from '@/views/Home/components/Channels.vue'
import { getItem } from '@/utils/storage'
import { mapState } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      // tab标签页选中索引
      tabActive: 0,
      // 频道列表
      channelsData: [],
      // popup 弹出层Flag
      popup: false
    }
  },
  created () {
    this.getChannelsData()
  },
  computed: {
    ...mapState(['userTouken'])
  },
  // 注册自组件
  components: {
    articleList,
    channels
  },
  methods: {
    // 获取频道列表
    async getChannelsData () {
      const localChannel = getItem('myChannel')
      if (!this.userTouken && localChannel) {
        this.channelsData = localChannel
        return
      }
      try {
        const { data: res } = await getUserChannels()
        this.channelsData = res.data.channels
      } catch (err) {
        console.log(err.response.status)
      }
    },
    // 显示弹出层
    popupShow () {
      console.log(1)
      this.popup = true
    },
    // 子组件修改父组件的active时间
    updateActive (e, popupFlag) {
      this.tabActive = e
      this.popup = popupFlag
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  padding:174px 0 100px 0;
  // 只能设置根组件的根元素的样式 , 里面的子元素需要加deep穿透
  /deep/.van-nav-bar__title{
    max-width: unset;
  }
  .serachbtn {
      width: 555px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 32px;
      border: none;
  }
  /deep/.tabs {
    .van-tabs__wrap{
      position: fixed;
      top: 92px;
      height: 82px;
      width: 100%;
      border-bottom: 1px solid #EDEFF3;
      z-index: 2;
      .van-tabs__nav {
          padding-bottom:0;
          // 所有子tab
          .van-tab {
            height: 82px;
            min-width: 200px;
            border-right: 1px solid #EDEFF3;
            // 子tab的文本
            .van-tab__text {
              font-size: 28px;
              color: #777777;
            }
          }
          // 选中的子tab
          .van-tab--active {
            // 选中子tab的文本
            .van-tab__text {
              font-size: 30px;
              color: #333;
            }
          }
          // 底部滑块
          .van-tabs__line {
            width: 31px;
            height: 6px;
            background: #3296FA;
            border-radius: 3px;
            bottom: 8px;
          }
          // 右部汉堡
          .hamburger {
            display: flex;
            justify-content: center;
            align-items: center;
            // 因为tab自盒子有flex 所以无法直接设置宽度  可以通过定位和
            width: 66px;
            height: 82px;
            position: fixed;
            right: 0;
            background: rgba(255, 255, 255, 0.8);
            // &和父盒子的链接符
            &:before {
              content: '';
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 2px;
              height: 82px;
              background: url('~@/assets/gradient-gray-line.png') no-repeat;
              background-size: contain;
            }
            .toutiao {
              font-size: 40px;
            }
          }
          // 右侧占位
          .right {
            width: 66px;
            flex-shrink: 0;
          }
        }
    }
  }
  .van-popup {
    // background-color: rgba(255, 255, 255, 0.3);
    padding-top: 70px;
  }
}
</style>
